<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="assets/css/reset.css">
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="stylesheet" href="assets/css/animate.min.css">
  <link rel="icon" href="favicon.svg">
  <title>Weather App</title>
  <meta name="title" content="weatherio">
  <meta name="description" content="Weatherio is a weather app made by Egor Rubtsov">
</head>
<body>
  <div class="container">
    <div class="sidebar">
      <div>
        <form class="search" id="search">
          <input id="query" type="text" placeholder="search...">
          <button>
            <i class="fas fa-search"></i>
          </button>
        </form>
        <div class="weather-icon">
          <img src="assets/icons/sun/27.png" alt="" id="icon">
        </div>
        <div class="temperature">
          <h1 id="temp">0</h1>
          <span id="temp-unit">°C</span>
        </div>
        <div class="date-time">
          <p id="date-time">Monday, 12:00</p>
        </div>
        <div class="divider"></div>
        <div class="condition-rain">
          <div class="condition">
            <i class="fas fa-cloud"></i>
            <p id="condition">condition</p>
          </div>
          <div class="rain">
            <i class="fas fa-tint"></i>
            <p id="rain">perc - 0%</p>
          </div>
        </div>
      </div>
      <div class="location">
        <div class="location-icon">
          <i class="fas fa-map-marker-alt"></i>
        </div>
        <div class="location-text">
          <p id="location">location</p>
        </div>
      </div>
    </div>
    <main class="main">
      <nav>
        <ul class="options">
          <button class="hourly">today</button>
          <button class="week active">week</button>
        </ul>
        <ul class="options units">
          <button class="celcius active">°C</button>
          <button class="fahrenheit">°F</button>
        </ul>
      </nav>
      <div class="cards" id="weather-cards">
        <div class="card">
          <h2 class="day-name">Monday</h2>
          <div class="card-icon">
            <img src="assets/icons/moon/10.png" class="day-icon" alt="" />
          </div>
          <div class="day-temp">
            <h2 class="temp">10</h2>
            <span class="temp-unit">°C</span>
          </div>
        </div>
      </div>
        <div class="highlights">
          <h2 class="heading">today's highlights</h2>
          <div class="cards">
            <div class="card2">
              <h4 class="card-heading">UV-Index</h4>
              <div class="content">
                <p class="uv-index">0</p>
                <p class="uv-text">Low</p>
              </div>
            </div>
            <div class="card2">
              <h4 class="card-heading">Wind Speed</h4>
              <div class="content">
                <p class="wind-speed">0</p>
                <p>km/h</p>
              </div>
            </div>
            <div class="card2">
              <h4 class="card-heading">Sunrise & Sunset</h4>
              <div class="content">
                <p class="sun-rise">0</p>
                <p class="sun-set">0</p>
              </div>
            </div>
            <div class="card2">
              <h4 class="card-heading">Humidity</h4>
              <div class="content">
                <p class="humidity">0</p>
                <p class="humidity-status">Normal</p>
              </div>
            </div>
            <div class="card2">
              <h4 class="card-heading">Visibility</h4>
              <div class="content">
                <p class="visibility">0</p>
                <p class="visibility-status">Normal</p>
              </div>
            </div>
            <div class="card2">
              <h4 class="card-heading">Air Quality</h4>
              <div class="content">
                <p class="air-quality">0</p>
                <p class="air-quality-status">Normal</p>
              </div>
            </div>
      </div>
    </div>
    <p class="credits">Created with ❤️ by Egor Rubtsov</p>
    </main>
  </div>
  <script src="js/bundle.js"></script>
</body>
</html>
